/* My mother always prayed for me to be a success person. So I try it from now. */
 
* {
  margin:0px 0px;
  padding:0px 0px;
}

body {
  background-color:#03436E;
  margin:0px 0px;
  padding:50px;
  font:normal 12px/16px Arial,Sans-Serif;
  color:white;
  -webkit-box-shadow:inset 0px 0px 0px 20px #052E48;
  -moz-box-shadow:inset 0px 0px 0px 20px #052E48;
  box-shadow:inset 0px 0px 0px 20px #052E48;
}

h2 {
  font-family:Georgia,Serif;
  font-weight:normal;
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  margin-bottom:7px;
}

.container {
  border-top:1px dashed #052E48;
  margin-top:15px;
  padding:15px 15px 0px;
}

.container .item,
.container .icon-group {
  display:inline-block;
}

.container .item small {
  width:70px;
  height:70px;
  background-color:#052E48;
  text-align:center;
  display:block;
  float:left;
  line-height:70px;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  margin:1px;
}

.container .icon-group:hover {
  position:relative;
  z-index:999;
  background-color:#125D93;
  -webkit-box-shadow:0px 0px 0px 2px #125D93;
  -moz-box-shadow:0px 0px 0px 2px #125D93;
  box-shadow:0px 0px 0px 2px #125D93;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.container .icon-group a.sc-icon       {float:left;}
.container .icon-group a.sc-icon:hover {top:0px !important;}

.container .item a.selected {
  -webkit-box-shadow:inset 0px 0px 0px 1px cyan;
  -moz-box-shadow:inset 0px 0px 0px 1px cyan;
  box-shadow:inset 0px 0px 0px 1px cyan;
}

#result {
  margin:50px 0px 50px;
}

#result div.flow {
  height:200px;
  overflow:auto;
  background-color:#111;
  border:5px solid #052E48;
  margin:10px auto 10px;
}

#result pre {
  padding:0px 1em;
  display:block;
  white-space:pre;
  word-wrap:normal;
  min-height:200px;
  -webkit-box-shadow:inset 0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 3px black;
  box-shadow:inset 0px 1px 3px black;
  font:normal 12px/24px Monaco,Monospace;
  background-color:#111;
  background-image:-webkit-repeating-linear-gradient(top,#111 0px,#111 24px,#222 24px,#222 48px,#222 48px);
  background-image:-moz-repeating-linear-gradient(top,#111 0px,#111 24px,#222 24px,#222 48px,#222 48px);
  background-image:-ms-repeating-linear-gradient(top,#111 0px,#111 24px,#222 24px,#222 48px,#222 48px);
  background-image:-o-repeating-linear-gradient(top,#111 0px,#111 24px,#222 24px,#222 48px,#222 48px);
  background-image:repeating-linear-gradient(top,#111 0px,#111 24px,#222 24px,#222 48px,#222 48px);
  color:#DAE0F1;
  position:relative;
}

#result pre::-moz-selection {background-color:#FF1CD6;color:white;}
#result pre::selection      {background-color:#FF1CD6;color:white;}

#result pre .loading {
  background-color:black;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  font:bold 14px/200px Verdana,Arial,Sans-Serif;
  color:white;
  text-align:center;
}

.left {
  width:49%;
  height:200px;
  float:left;
}

.right {
  width:49%;
  height:200px;
  float:right;
}

a#top {
  color:white;
  font-weight:bold;
  position:relative;
  cursor:pointer;
  text-decoration:underline;
}
a#top:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-width:14px 6px;
  border-bottom-color:white;
  position:absolute;
  left:100%;
  bottom:-0px;
  margin-left:5px;
}

#logo {
  text-align:left;
  margin-bottom:30px;
}

#logo h1 {
  font:normal 22px Georgia,Serif;
  margin-bottom:10px;
  text-shadow:0px 1px 2px rgba(0,0,0,0.4);
  position:relative;
  padding-left:35px;
}

#logo h1 a {
  color:white;
  text-decoration:none !important;
}

#logo h1:before {
  content:"";
  width:0px;
  height:0px;
  border:15px solid transparent;
  border-bottom-color:white;
  position:absolute;
  top:-20px;
  left:0px;
}

#logo h1:after {
  content:"";
  width:4px;
  height:10px;
  border:8px solid white;
  border-width:5px 8px 0px 8px;
  position:absolute;
  top:8px;
  left:5px;
}

/* CSS3 Red Face Logo a.k. Dora the Exploder */
.dte {
  cursor:pointer;
  position:relative;
  width:50px;
  height:50px;
  left:5px;
  margin:10px 10px 0px auto;
  bottom:-10px;
  display:inline-block;
  text-decoration:none;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-transition:all 0.26s ease-out 0.5s;
  -moz-transition:all 0.26s ease-out 0.5s;
  -ms-transition:all 0.26s ease-out 0.5s;
  -o-transition:all 0.26s ease-out 0.5s;
  transition:all 0.26s ease-out 0.5s;
}

.dte span {
  display:block;
  font:bold 14px Arial,Sans-Serif;
  line-height:34px;
  color:white;
  padding:0px 15px;
  background-color:black;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  position:absolute;
  top:5px;
  right:100%;
  z-index:99;
  margin-right:30px;
  visibility:hidden;
  opacity:0;
  -webkit-transform:scaleY(-1);
  -moz-transform:scaleY(-1);
  -ms-transform:scaleY(-1);
  -o-transform:scaleY(-1);
  transform:scaleY(-1);
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.dte span:after {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-left-color:black;
  position:absolute;
  top:10px;
  left:100%;
}

.dte:hover {
  bottom:4px;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);
}

.dte:hover span {
  visibility:visible;
  margin-right:15px;
  opacity:1;
  -webkit-transform:scaleY(1);
  -moz-transform:scaleY(1);
  -ms-transform:scaleY(1);
  -o-transform:scaleY(1);
  transform:scaleY(1);
  -webkit-animation:dte 0.2s infinite alternate 1s;
  -moz-animation:dte 0.2s infinite alternate 1s;
  -ms-animation:dte 0.2s infinite alternate 1s;
  -o-animation:dte 0.2s infinite alternate 1s;
  animation:dte 0.2s infinite alternate 1s;
}

.dte-box1 {
  width:45px;
  height:55px;
  background-color:#000;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,0.7);
  box-shadow:0 1px 5px rgba(0,0,0,0.7);
}

.dte-mid {
  width:45px;
  height:45px;
  background-color:#FF0000;
  background-image:-webkit-linear-gradient(top,#EA0303,#FF0000);
  background-image:-moz-linear-gradient(top,#EA0303,#FF0000);
  background-image:-ms-linear-gradient(top,#EA0303,#FF0000);
  background-image:-o-linear-gradient(top,#EA0303,#FF0000);
  background-image:linear-gradient(top,#EA0303,#FF0000);
  border-left:5px solid #000;
  border-right:5px solid #000;
  position:absolute;
  top:5px;
  left:-5px;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,0.7);
  box-shadow:0 1px 5px rgba(0,0,0,0.7);
}

.tn1 {
  position:absolute;
  width:25px;
  height:10px;
  top:25px;
  left:5px;
  background:transparent;
  border-left:5px solid #000;
  border-right:5px solid #000;
}

.tn2 {
  position:absolute;
  width:15px;
  height:5px;
  background:transparent;
  border-left:5px solid #000;
  border-right:5px solid #000;
  top:15px;
  left:10px;
}

.tn2.botlogo {
  bottom:10px;
  top:auto;
}

.horlogo {
  position:absolute;
  width:15px;
  height:5px;
  background:#000;
  left:15px;
  bottom:5px;
}

#glass {
  position:absolute;
  top:0px;
  left:-5px;
  z-index:100;
  width:55px;
  height:30px;
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.35));
  background-image:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.35));
  background-image:-ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.35));
  background-image:-o-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.35));
  background-image:linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.35));
  -webkit-border-radius:70px / 30px;
  -moz-border-radius:70px / 30px;
  border-radius:70px / 30px;
}
/* End Redface */

a {color:white;}

a.how {
  font-weight:bold;
  color:red;
  text-decoration:none;
  position:relative;
  border-bottom:1px dashed white;
}

a.how span {
  width:70px;
  font:bold 12px/14px Arial;
  color:white;
  text-decoration:none;
  padding:10px 15px;
  background-color:black;
  border:2px solid #ccc;
  box-shadow:0px 1px 7px black;
  border-radius:3px;
  position:absolute;
  top:-10px;
  left:100%;
  margin-left:30px;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
  opacity:0;
  visibility:hidden;
}

a.how span:before,
a.how span:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-right-color:#ccc;
  position:absolute;
  top:8px;
  right:100%;
}

a.how span:after {
  border-right-color:black;
  border-width:6px;
  top:12px;
}

a.how:hover span {
  visibility:visible;
  opacity:1;
  margin-left:15px;
}

@-webkit-keyframes dte {
  0%   {margin-right:15px;}
  100% {margin-right:30px;}
}
@-moz-keyframes dte {
  0%   {margin-right:15px;}
  100% {margin-right:30px;}
}
@-ms-keyframes dte {
  0%   {margin-right:15px;}
  100% {margin-right:30px;}
}
@-o-keyframes dte {
  0%   {margin-right:15px;}
  100% {margin-right:30px;}
}
@keyframes dte {
  0%   {margin-right:15px;}
  100% {margin-right:30px;}
}

@media screen and (max-width:600px) {
        .left, .right {
          float:none;
          display:block;
          width:auto;
          height:250px;
          margin:10px 0px 10px;
        }
}

#footer {
  border-top:1px dashed #052E48;
  padding-top:15px;
  margin-top:15px;
  text-align:right;
}

.clear {clear:both;}
